import { useState } from "react";
import { Skeleton, Space, Table, Tag, Form, Input, Select,
   Button, Row, Col, Flex ,Typography} from "antd";

import "./index.css"
import { SearchOutlined } from '@ant-design/icons';

import { useNavigate } from "react-router-dom";
const { Title, Text } = Typography;
const { Option } = Select;

export const OrderList = () => {
  const navigate = useNavigate();
  const [isShow, setIsShow] = useState(true);

  // 模拟加载状态
  setTimeout(() => {
    setIsShow(false);
  }, 2000);

  const [form] = Form.useForm();

  // 搜索处理
  const handleSearch = () => {
    form.validateFields()
      .then(values => {
        console.log('搜索参数:', values);
        // 实际项目中这里会调用API
      })
      .catch(info => {
        console.log('筛选表单验证失败:', info);
      });
  };

  // 重置处理
  const handleReset = () => {
    form.resetFields();
    // 实际项目中这里会重置列表数据
  };

  // 订单表格列定义
  const columns = [
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      key: 'orderNo',
      width: 140,
    },
    {
      title: '客户姓名',
      dataIndex: 'customerName',
      key: 'customerName',
      width: 120,
    },
    {
      title: '理疗项目',
      dataIndex: 'treatment',
      key: 'treatment',
    },
    {
      title: '订单金额',
      dataIndex: 'amount',
      key: 'amount',
      render: (text) => `¥${text.toFixed(2)}`,
      width: 110,
    },
    {
      title: '支付方式',
      dataIndex: 'paymentMethod',
      key: 'paymentMethod',
      render: (text) => {
        let icon, color;
        switch (text) {
          case 'wechat':
            icon = <i className="fa fa-weixin text-green-500 mr-1"></i>;
            color = 'green';
            text = '微信支付';
            break;
          case 'alipay':
            icon = <i className="fa fa-alipay text-blue-400 mr-1"></i>;
            color = 'blue';
            text = '支付宝';
            break;
          case 'cash':
            icon = <i className="fa fa-money text-green-600 mr-1"></i>;
            color = 'orange';
            text = '现金支付';
            break;
          case 'card':
            icon = <i className="fa fa-credit-card text-blue-500 mr-1"></i>;
            color = 'purple';
            text = '会员卡支付';
            break;
          default:
            return text;
        }
        return <Tag color={color} icon={icon}>{text}</Tag>;
      },
      width: 140,
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      key: 'status',
      render: (text) => {
        let color;
        switch (text) {
          case '已预约':
            color = 'blue';
            break;
          case '已完成':
            color = 'green';
            break;
          case '已取消':
            color = 'red';
            break;
          case '进行中':
            color = 'orange';
            break;
          default:
            color = 'default';
        }
        return <Tag color={color}>{text}</Tag>;
      },
      width: 120,
    },
    {
      title: '下单时间',
      dataIndex: 'orderTime',
      key: 'orderTime',
      width: 160,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Flex gap="small" wrap>
          <Button
            type="primary"
            size="small"
            onClick={() => navigate(`/order/orderDetails/${record.key}`)}
            autoInsertSpace={false}
          >
            详情
          </Button>
        </Flex>
      ),
      width: 100,
    },
  ];

  // 中医理疗馆订单数据
  const data = [
    {
      key: '1',
      orderNo: 'TCM20230615001',
      customerName: '张三',
      treatment: '推拿按摩',
      amount: 128.00,
      paymentMethod: 'wechat',
      status: '已完成',
      orderTime: '2023-06-15 09:30'
    },
    {
      key: '2',
      orderNo: 'TCM20230615002',
      customerName: '李四',
      treatment: '艾灸理疗',
      amount: 98.00,
      paymentMethod: 'alipay',
      status: '已完成',
      orderTime: '2023-06-15 10:15'
    },
    {
      key: '3',
      orderNo: 'TCM20230615003',
      customerName: '王五',
      treatment: '针灸治疗',
      amount: 168.00,
      paymentMethod: 'card',
      status: '已完成',
      orderTime: '2023-06-15 14:00'
    },
    {
      key: '4',
      orderNo: 'TCM20230615004',
      customerName: '赵六',
      treatment: '拔罐疗法',
      amount: 88.00,
      paymentMethod: 'cash',
      status: '已完成',
      orderTime: '2023-06-15 15:30'
    },
    {
      key: '5',
      orderNo: 'TCM20230616001',
      customerName: '孙七',
      treatment: '中药熏蒸',
      amount: 198.00,
      paymentMethod: 'wechat',
      status: '已预约',
      orderTime: '2023-06-16 08:45'
    },
    {
      key: '6',
      orderNo: 'TCM20230616002',
      customerName: '周八',
      treatment: '推拿按摩+艾灸',
      amount: 218.00,
      paymentMethod: 'alipay',
      status: '进行中',
      orderTime: '2023-06-16 10:30'
    },
    {
      key: '7',
      orderNo: 'TCM20230616003',
      customerName: '吴九',
      treatment: '针灸治疗',
      amount: 168.00,
      paymentMethod: 'card',
      status: '已取消',
      orderTime: '2023-06-16 11:20'
    }
  ];

  return (
    <div>
      {isShow ? (
        <Skeleton paragraph={{ rows: 10 }} active></Skeleton>
      ) : (
        <div>
          <div style={{ display: "flex", marginBottom: 10, justifyContent: "space-between" }}>
            <div style={{ width: 250 }}>
              <Title level={2} className="text-secondary">订单管理</Title>
              <Text type="secondary">查看和处理所有的客户订单</Text>
            </div>
         
          </div>

          <div className="order-action" style={{paddingTop:20}}>
            <Form
              form={form}
              layout="vertical"
              className="bg-white p-4 rounded-lg card-shadow"
              initialValues={{ orderStatus: '', payType: '', orderType: '' }}
            >
              <Row gutter={[16, 16]}>
                <Col xs={24} sm={12} md={6}>
                  <Form.Item
                    name="searchKey"
                    label="搜索订单"
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}
                  >
                    <Input
                      placeholder="搜索订单号/客户姓名..."
                      prefix={<SearchOutlined style={{ color: '#999' }} />}
                      style={{ borderRadius: '4px' }}
                    />
                  </Form.Item>
                </Col>

                {/* 订单状态 */}
                <Col xs={24} sm={12} md={6}>
                  <Form.Item
                    name="orderStatus"
                    label="订单状态"
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}
                  >
                    <Select style={{ width: '100%' }} placeholder="全部状态">
                      <Option value="已预约">已预约</Option>
                      <Option value="进行中">进行中</Option>
                      <Option value="已完成">已完成</Option>
                      <Option value="已取消">已取消</Option>
                    </Select>
                  </Form.Item>
                </Col>

                {/* 支付方式 */}
                <Col xs={24} sm={12} md={6}>
                  <Form.Item
                    name="payType"
                    label="支付方式"
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}
                  >
                    <Select style={{ width: '100%' }} placeholder="全部方式">
                      <Option value="wechat">
                        <span><i className="fa fa-weixin text-green-500 mr-1"></i> 微信支付</span>
                      </Option>
                      <Option value="alipay">
                        <span><i className="fa fa-alipay text-blue-400 mr-1"></i> 支付宝</span>
                      </Option>
                      <Option value="cash">
                        <span><i className="fa fa-money text-green-600 mr-1"></i> 现金支付</span>
                      </Option>
                      <Option value="card">
                        <span><i className="fa fa-credit-card text-blue-500 mr-1"></i> 会员卡支付</span>
                      </Option>
                    </Select>
                  </Form.Item>
                </Col>

                <Col xs={24} sm={12} md={6}>
                  <Space style={{ marginTop: "30px" }}>
                    <Button
                      type="primary"
                      icon={<SearchOutlined />}
                      onClick={handleSearch}
                      style={{ backgroundColor: '#2F4F4F', borderColor: '#2F4F4F' }}
                    >
                      搜索订单
                    </Button>
                    <Button
                      type="default"
                      onClick={handleReset}
                    >
                      重置
                    </Button>
                  </Space>
                </Col>
              </Row>
            </Form>
          </div>
          <div style={{ marginTop: "10px" }}>
            <Table
              bordered
              columns={columns}
              dataSource={data}
              pagination={{
                pageSize: 10,
                showSizeChanger: true,
                showTotal: (total) => `共 ${total} 条订单`
              }}
            />
          </div>
        </div>
      )}
    </div>
  );
};
